import React, {useState, useMemo, useEffect} from 'react';
// import { Pie, measureTextWidth } from '@ant-design/plots';
import { Pie } from '@ant-design/plots';
import './index.less'

const Warning = ({data=[]}) => {
	const [pageHeight, setHeight] = useState(0)


	useEffect(() => {
		getPageHeight()
		window.addEventListener('resize', ()=>{getPageHeight()});
		return () => {
			window.removeEventListener('resize', ()=>{});
		}
	}, [])

	const getPageHeight = () => {
		// let ele = document.getElementById('warning-warp')
		// let temp = parseInt(ele.offsetHeight + '');
		// setHeight(temp)
	}

	function renderStatistic(containerWidth, text, style) {
		// const { width: textWidth, height: textHeight } = measureTextWidth(text, style);
		// const R = containerWidth / 2; // r^2 = (w / 2)^2 + (h - offsetY)^2
		//
		// let scale = 1;
		//
		// if (containerWidth < textWidth) {
		// 	scale = Math.min(Math.sqrt(Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2)))), 1);
		// }
		//
		// const textStyleStr = `width:${containerWidth}px;`;
		// return `<div style="${textStyleStr};font-size:${scale}em;line-height:${scale < 1 ? 1 : 'inherit'};">${text}</div>`;
	}
	const config = {
		autoFit: true,
		// padding: [pageHeight/5, 0, pageHeight/5, 0],
		appendPadding: 10,
		data,
		angleField: 'value',
		colorField: 'type',
		color: ({ type }) => {
			if(type === '网络'){
				return '#00ff33';
			}
			else if(type === '内存'){
				return '#00c6fd';
			}
			else if(type === 'CPU'){
				return '#0079fe';
			}
			return '#514aca';
		},
		radius: 1,
		innerRadius: 0.64,
		meta: {
			value: {
				formatter: (v) => `${v}`,
			},
		},
		label: null,
		statistic: {
			title: {
				offsetY: -4,
				style: {
					fontSize: pageHeight/10,
					color: 'white'
				},
				customHtml: (container, view, datum) => {
					const { width, height } = container.getBoundingClientRect();
					const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
					const text = datum ? datum.type : '合计';
					return renderStatistic(d, text, {
						fontSize: 5,
					});
				},
			},
			content: {
				offsetY: 4,
				style: {
					fontSize: pageHeight/10,
					color: 'white'
				},
			},
		},
		legend: false,
	};

	return useMemo(()=>{
		return (
			<div style={{width: '100%', height: '100%'}} id={'warning-warp'}>
				<Pie {...config} />
			</div>
		)
	}, [data]);
};

export default Warning;
